<template>
  <!--产能统计 -->
  <div class="glass_content">
    <div class="glass_serch">
      <el-form class="table_serch">
        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">机种编码</div>
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            class="product"
            style="margin-left: 10px; margin-top: 8px"
            v-model="formInline.recipe"
            @input="(e) => (formInline.recipe = validForbid(e))"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </div>

        <!-- 工业 -->
        <div class="table_serch_labe" style="margin-left: 13px">
          <div class="table_serch_labe_title">工单编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              class="product"
              popper-class="my-autocomplete"
              style="margin-left: 10px"
              v-model="formInline.order"
              @input="(e) => (formInline.order = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 13px">
          <div class="table_serch_labe_title">线体编码</div>
          <el-form-item label="">
            <el-autocomplete
              class="product"
              size="mini"
              popper-class="my-autocomplete"
              style="margin-left: 10px"
              @input="(e) => (formInline.line = validForbid(e))"
              v-model="formInline.line"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 13px">
          <div class="table_serch_labe_title">站点编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              class="product"
              popper-class="my-autocomplete"
              style="margin-left: 10px"
              @input="(e) => (formInline.site = validForbid(e))"
              v-model="formInline.site"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 13px">
          <div class="table_serch_labe_title">班次编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 130px; margin-left: 10px"
              v-model="formInline.class"
              @input="(e) => (formInline.class = validname(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe">
          <div class="table_serch_labe_title" style="margin-left: 10px">
            日期
          </div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.endtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 130px; margin-left: 9px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 1.5%">
          <el-button
            type="mini"
            @click="formInlineclick"
            style="height: 30px; margin-top: 6px"
            >查询</el-button
          >
        </div>
      </el-form>
    </div>

    <!-- 切换窗口 -->
    <div class="statis_coent">
      <div class="statis_hader">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="产能统计" name="first">
            <div class="first_content">
              <!-- 柱状图1 -->
              <div id="first_svg"></div>
              <div style="margin-top: 20px; font-size: 14px">产能信息统计</div>
              <!-- 表格 产能统计-->
              <div class="statis_table">
                <!-- 年 -->
                <div>
                  <el-table
                    border
                    :data="this.year"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="70"
                      :label="this.totol.year"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度1 -->
                <div>
                  <el-table
                    border
                    :data="this.listtable.quarter1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度2-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.quarter2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="70"
                      :label="this.totol.quarter2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月1-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.month1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月2-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.month2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月3-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.month3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周1-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.week1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周2-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.week2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周3-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.week3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周4-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.week4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week4"
                    ></el-table-column>
                  </el-table>
                </div>
                <!--  -->

                <div>
                  <el-table
                    border
                    :data="this.listtable.day1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      width="92"
                      prop="val"
                      :label="this.totol.day1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日2-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.day2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日3-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.day3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日4-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.day4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日5-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.day5"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day5"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日6-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.day6"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day6"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日7-->
                <div>
                  <el-table
                    border
                    :data="this.listtable.day7"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day7"
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="稼动率" name="second">
            <div class="second_content">
              <div id="second_mysol"></div>
              <!--表格  稼动率-->
              <div style="margin-top: 20px; font-size: 14px">
                产能信息稼动率
              </div>
              <div class="statis_table">
                <!-- 年 -->
                <div>
                  <el-table
                    border
                    :data="this.statctable.year"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.year"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度1 -->
                <div>
                  <el-table
                    border
                    :data="this.statctable.quarter1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度2-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.quarter2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月1-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.month1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月2-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.month2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月3-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.month3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周1-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.week1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周2-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.week2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周3-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.week3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周4-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.week4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日1-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.day1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      width="92"
                      prop="val"
                      :label="this.totol.day1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日2-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.day2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日3-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.day3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日4-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.day4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日5-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.day5"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day5"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日6-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.day6"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day6"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日7-->
                <div>
                  <el-table
                    border
                    :data="this.statctable.day7"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day7"
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="点亮统计" name="third">
            <div class="third_content">
              <!-- 柱状图3 -->
              <div id="third_mysol"></div>
              <!-- 表格 点亮率 -->
              <div style="margin-top: 20px; font-size: 14px">
                产能点亮率统计
              </div>
              <div class="statis_table">
                <!-- 年 -->
                <div>
                  <el-table
                    border
                    :data="this.lightup.year"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.year"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度1 -->
                <div>
                  <el-table
                    border
                    :data="this.lightup.quarter1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度2-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.quarter2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月1-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.month1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月2-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.month2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月3-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.month3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周1-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.week1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周2-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.week2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周3-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.week3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周4-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.week4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日1-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.day1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      width="92"
                      prop="val"
                      :label="this.totol.day1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日2-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.day2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日3-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.day3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日4-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.day4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日5-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.day5"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day5"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日6-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.day6"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day6"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日7-->
                <div>
                  <el-table
                    border
                    :data="this.lightup.day7"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day7"
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="TT统计" name="fourth">
            <div class="fourth_content">
              <!-- 柱状图4 -->
              <div id="fourth_mysol"></div>
              <!-- 表格  -->
              <div style="margin-top: 20px; font-size: 14px">产能TT统计</div>
              <div class="statis_table">
                <!-- 年 -->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.year"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.year"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度1 -->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.quarter1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度2-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.quarter2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月1-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.month1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月2-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.month2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月3-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.month3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周1-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.week1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周2-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.week2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周3-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.week3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周4-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.week4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日1-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.day1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      width="92"
                      prop="val"
                      :label="this.totol.day1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日2-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.day2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日3-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.day3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日4-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.day4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日5-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.day5"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day5"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日6-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.day6"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day6"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日7-->
                <div>
                  <el-table
                    border
                    :data="this.TTupdata.day7"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day7"
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="良率" name="yield">
            <div class="first_content">
              <!-- 柱状图1 -->
              <div id="yield_bar"></div>
              <!-- 表格 产能统计-->
              <div style="margin-top: 20px; font-size: 14px">产能良率信息</div>
              <div class="statis_table">
                <!-- 年 -->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.year"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.year"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度1 -->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.quarter1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 季度2-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.quarter2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="65"
                      :label="this.totol.quarter2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月1-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.month1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月2-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.month2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 月3-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.month3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.month3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周1-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.week1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周2-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.week2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周3-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.week3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 周4-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.week4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="73"
                      :label="this.totol.week4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日1-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.day1"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      width="92"
                      prop="val"
                      :label="this.totol.day1"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日2-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.day2"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day2"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日3-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.day3"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day3"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日4-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.day4"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day4"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日5-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.day5"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day5"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日6-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.day6"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day6"
                    ></el-table-column>
                  </el-table>
                </div>

                <!-- 日7-->
                <div>
                  <el-table
                    border
                    :data="this.yielddata.day7"
                    size="small"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '2px', width: '20px' }"
                    style="font-size: 9px"
                  >
                    <el-table-column
                      prop="val"
                      width="92"
                      :label="this.totol.day7"
                    ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中... ....</div>
      <div class="table_timer">网络请求延时: {{ timer }}秒</div>
    </div> -->

    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>
<script>
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: {
    Popup,
  },
  data() {
    return {
      a: 0,
      Popup_show: false,
      network: true, //默认有网
      timer: 0,
      valtimer: "",
      isshow: false,
      activeName: "first",
      formInline: {
        recipe: "VR2-1-24",
        order: "",
        line: "",
        site: "",
        endtime: "2021-01-10",
        errorcode: "",
        class: "",
        personid: "",
        type: [],
      },
      restaurants: [],
      tableData: [],
      items: [],
      year: [],

      //产能统计
      totol: {
        year: "",
        quarter1: "",
        quarter2: "",
        month1: "",
        month2: "",
        month3: "",
        week1: "",
        week2: "",
        week3: "",
        week4: "",
        day1: "",
        day2: "",
        day3: "",
        day4: "",
        day5: "",
        day6: "",
        day7: "",
      },
      listtable: {
        quarter1: [],
        quarter2: [],
        month1: [],
        month2: [],
        month3: [],
        week1: [],
        week2: [],
        week3: [],
        week4: [],
        day1: [],
        day2: [],
        day3: [],
        day4: [],
        day5: [],
        day6: [],
        day7: [],
      },

      //稼动率
      statctable: {
        year: [],
        quarter1: [],
        quarter2: [],
        month1: [],
        month2: [],
        month3: [],
        week1: [],
        week2: [],
        week3: [],
        week4: [],
        day1: [],
        day2: [],
        day3: [],
        day4: [],
        day5: [],
        day6: [],
        day7: [],
      },

      //点亮率
      lightup: {
        year: [],
        quarter1: [],
        quarter2: [],
        month1: [],
        month2: [],
        month3: [],
        week1: [],
        week2: [],
        week3: [],
        week4: [],
        day1: [],
        day2: [],
        day3: [],
        day4: [],
        day5: [],
        day6: [],
        day7: [],
      },

      //TT
      TTupdata: {
        year: [],
        quarter1: [],
        quarter2: [],
        month1: [],
        month2: [],
        month3: [],
        week1: [],
        week2: [],
        week3: [],
        week4: [],
        day1: [],
        day2: [],
        day3: [],
        day4: [],
        day5: [],
        day6: [],
        day7: [],
      },
      //良率
      yielddata: {
        year: [],
        quarter1: [],
        quarter2: [],
        month1: [],
        month2: [],
        month3: [],
        week1: [],
        week2: [],
        week3: [],
        week4: [],
        day1: [],
        day2: [],
        day3: [],
        day4: [],
        day5: [],
        day6: [],
        day7: [],
      },
    };
  },

  created() {},
  beforeDestroy() {},

  methods: {
    // //计时器
    // timerclick() {
    //   this.valtimer = setInterval(() => {
    //     this.isshow = true;
    //     this.timer++;
    //   }, 1000);
    // },

    // removetmer() {
    //   this.isshow = false;
    //   clearInterval(this.valtimer);
    //   this.timer = 0;
    // },

    formInlineclick() {
      // console.log('main.js-------------------',this.ajax)

      if (navigator.onLine) {
        console.log("网络已连接");
        this.removetmer();
      } else {
        console.log("已断网");
        setTimeout(() => {
          this.timerclick();
        }, 3000);
      }
      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime == "") {
        this.$alert("日期不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url: "statistical",
          method: "GET",
          params: {
            data: this.formInline,
          },
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          var result = res.data;
          if (result.code == 200) {
            //this.a++;
            // console.log(`第${this.a}次回来数据`);
            // console.log("数据回来");
            this.items = result.data;

            setTimeout(() => {
              if (this.items.length == "") {
                this.Popup_show = true;
                this.Popup_timer = setInterval(() => {
                  this.timer++;
                }, 1000);
              } else {
                return;
              }
            }, 5000);
            // console.log(this.items)
            var list = [];
            list.push(this.items.total.year[0].val);
            list.push(this.items.total.quarter[0].val);
            list.push(this.items.total.quarter[1].val);
            list.push(this.items.total.month[0].val);
            list.push(this.items.total.month[1].val);
            list.push(this.items.total.month[2].val);
            list.push(this.items.total.week[0].val);
            list.push(this.items.total.week[1].val);
            list.push(this.items.total.week[2].val);
            list.push(this.items.total.week[3].val);
            list.push(this.items.total.day[0].val);
            list.push(this.items.total.day[1].val);
            list.push(this.items.total.day[2].val);
            list.push(this.items.total.day[3].val);
            list.push(this.items.total.day[4].val);
            list.push(this.items.total.day[5].val);
            list.push(this.items.total.day[6].val);
            console.log(this.formInline.endtime, list);
            this.capacity = this.items.total;
            this.statcal = this.items.activation;
            this.lightUp = this.items.lightUp;
            this.TTdata = this.items.tt;
            this.okyield = this.items.okYield;
            this.$nextTick(() => {
              //  console.log('强制更新')
              this.analysisdata();
              this.statisbar();
              this.secondbarchart();
              this.thirdbarchart();
              this.fourthbarchart();
              this.yeidbar();
            });
          } else if (result.code == 204) {
            this.$alert(result.message, "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
        });
      }
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    cancelget() {
      // console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    analysisdata() {
      //产能
      this.year = this.capacity.year;
      this.quarter = this.capacity.quarter;
      this.month = this.capacity.month;
      this.week = this.capacity.week;
      this.day = this.capacity.day;
      this.listtable.quarter1 = [this.quarter[0]];
      this.listtable.quarter2 = [this.quarter[1]];
      this.listtable.month1 = [this.month[0]];
      this.listtable.month2 = [this.month[1]];
      this.listtable.month3 = [this.month[2]];
      this.listtable.week1 = [this.week[0]];
      this.listtable.week2 = [this.week[1]];
      this.listtable.week3 = [this.week[2]];
      this.listtable.week4 = [this.week[3]];
      this.listtable.day1 = [this.day[0]];
      this.listtable.day2 = [this.day[1]];
      this.listtable.day3 = [this.day[2]];
      this.listtable.day4 = [this.day[3]];
      this.listtable.day5 = [this.day[4]];
      this.listtable.day6 = [this.day[5]];
      this.listtable.day7 = [this.day[6]];
      this.totol.year = this.year[0].date;
      this.totol.quarter1 = this.quarter[0].date;
      this.totol.quarter2 = this.quarter[1].date;
      this.totol.month1 = this.month[0].date;
      this.totol.month2 = this.month[1].date;
      this.totol.month3 = this.month[2].date;
      this.totol.week1 = this.week[0].date;
      this.totol.week2 = this.week[1].date;
      this.totol.week3 = this.week[2].date;
      this.totol.week4 = this.week[3].date;
      this.totol.day1 = this.day[0].date;
      this.totol.day2 = this.day[1].date;
      this.totol.day3 = this.day[2].date;
      this.totol.day4 = this.day[3].date;
      this.totol.day5 = this.day[4].date;
      this.totol.day6 = this.day[5].date;
      this.totol.day7 = this.day[6].date;

      ////稼动率
      this.statctable.year = this.statcal.year;
      this.statctable.quarter1 = [this.statcal.quarter[0]];
      this.statctable.quarter2 = [this.statcal.quarter[1]];
      this.statctable.month1 = [this.statcal.month[0]];
      this.statctable.month2 = [this.statcal.month[1]];
      this.statctable.month3 = [this.statcal.month[2]];
      this.statctable.week1 = [this.statcal.week[0]];
      this.statctable.week2 = [this.statcal.week[1]];
      this.statctable.week3 = [this.statcal.week[2]];
      this.statctable.week4 = [this.statcal.week[3]];
      this.statctable.day1 = [this.statcal.day[0]];
      this.statctable.day2 = [this.statcal.day[1]];
      this.statctable.day3 = [this.statcal.day[2]];
      this.statctable.day4 = [this.statcal.day[3]];
      this.statctable.day5 = [this.statcal.day[4]];
      this.statctable.day6 = [this.statcal.day[5]];
      this.statctable.day7 = [this.statcal.day[6]];

      //点亮率
      this.lightup.year = this.lightUp.year;
      this.lightup.quarter1 = [this.lightUp.quarter[0]];
      this.lightup.quarter2 = [this.lightUp.quarter[1]];
      this.lightup.month1 = [this.lightUp.month[0]];
      this.lightup.month2 = [this.lightUp.month[1]];
      this.lightup.month3 = [this.lightUp.month[2]];
      this.lightup.week1 = [this.lightUp.week[0]];
      this.lightup.week2 = [this.lightUp.week[1]];
      this.lightup.week3 = [this.lightUp.week[2]];
      this.lightup.week4 = [this.lightUp.week[3]];
      this.lightup.day1 = [this.lightUp.day[0]];
      this.lightup.day2 = [this.lightUp.day[1]];
      this.lightup.day3 = [this.lightUp.day[2]];
      this.lightup.day4 = [this.lightUp.day[3]];
      this.lightup.day5 = [this.lightUp.day[4]];
      this.lightup.day6 = [this.lightUp.day[5]];
      this.lightup.day7 = [this.lightUp.day[6]];

      //TT
      this.TTupdata.year = this.TTdata.year;
      this.TTupdata.quarter1 = [this.TTdata.quarter[0]];
      this.TTupdata.quarter2 = [this.TTdata.quarter[1]];
      this.TTupdata.month1 = [this.TTdata.month[0]];
      this.TTupdata.month2 = [this.TTdata.month[1]];
      this.TTupdata.month3 = [this.TTdata.month[2]];
      this.TTupdata.week1 = [this.TTdata.week[0]];
      this.TTupdata.week2 = [this.TTdata.week[1]];
      this.TTupdata.week3 = [this.TTdata.week[2]];
      this.TTupdata.week4 = [this.TTdata.week[3]];
      this.TTupdata.day1 = [this.TTdata.day[0]];
      this.TTupdata.day2 = [this.TTdata.day[1]];
      this.TTupdata.day3 = [this.TTdata.day[2]];
      this.TTupdata.day4 = [this.TTdata.day[3]];
      this.TTupdata.day5 = [this.TTdata.day[4]];
      this.TTupdata.day6 = [this.TTdata.day[5]];
      this.TTupdata.day7 = [this.TTdata.day[6]];

      //良率
      this.yielddata.year = this.okyield.year;
      this.yielddata.quarter1 = [this.okyield.quarter[0]];
      this.yielddata.quarter2 = [this.okyield.quarter[1]];
      this.yielddata.month1 = [this.okyield.month[0]];
      this.yielddata.month2 = [this.okyield.month[1]];
      this.yielddata.month3 = [this.okyield.month[2]];
      this.yielddata.week1 = [this.okyield.week[0]];
      this.yielddata.week2 = [this.okyield.week[1]];
      this.yielddata.week3 = [this.okyield.week[2]];
      this.yielddata.week4 = [this.okyield.week[3]];
      this.yielddata.day1 = [this.okyield.day[0]];
      this.yielddata.day2 = [this.okyield.day[1]];
      this.yielddata.day3 = [this.okyield.day[2]];
      this.yielddata.day4 = [this.okyield.day[3]];
      this.yielddata.day5 = [this.okyield.day[4]];
      this.yielddata.day6 = [this.okyield.day[5]];
      this.yielddata.day7 = [this.okyield.day[6]];
    },

    loadAll() {
      // return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //柱状图1
    statisbar() {
      let my_first_svg = this.$echarts.init(
        document.getElementById("first_svg")
      );
      // console.log("ddddddddddd", this.capacity);
      let year = this.capacity.year;
      let quarter = this.capacity.quarter;
      let month = this.capacity.month;
      let week = this.capacity.week;
      let day = this.capacity.day;
      let list = [];
      for (let i = 0; i < year.length; i++) {
        list.push(year[i].val);
      }

      for (let i = 0; i < quarter.length; i++) {
        list.push(quarter[i].val);
      }

      for (let i = 0; i < month.length; i++) {
        list.push(month[i].val);
      }

      for (let i = 0; i < week.length; i++) {
        list.push(week[i].val);
      }

      for (let i = 0; i < day.length; i++) {
        list.push(day[i].val);
      }

      // console.log(list);
      // console.log(quartername1);
      my_first_svg.setOption({
        title: {
          // text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["1", "2"],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "日(1)",
            "日(2)",
            "日(3)",
            "日(4)",
            "日(5)",
            "日(6)",
            "日(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            type: "bar",

            label: {
              // show: true,
              position: "insideRight",
            },
            data: list,
          },
          // {
          //   name: quartername1,
          //   type: "bar",

          //   label: {
          //     // show: true,
          //     position: "insideRight",
          //   },
          //   // data:[20,10,10,10]
          //   data: quarterval1,
          // },
          // {
          //   name: quartername2,
          //   type: "bar",
          //   label: {
          //     // show: true,
          //     position: "insideRight",
          //   },
          //   data: quarterval2,
          // },
          // {
          //   name: "Line",
          //   type: "bar",
          //   stack: "1",
          //   label: {
          //     // show: true,
          //     position: "insideRight",
          //   },
          //   data: [23, 12, 34, 54, 12, 23, 34],
          // },
          // {
          //   name: "Mura",
          //   type: "bar",
          //   stack: "1",
          //   label: {
          //     // show: true,
          //     position: "insideRight",
          //   },
          //   data: [23, 12, 34, 54, 12, 23, 34],
          // },
        ],
      });
    },

    //柱状图2
    secondbarchart() {
      let my_barchart = this.$echarts.init(
        document.getElementById("second_mysol")
      );

      let yeara = this.statcal.year;
      let quartera = this.statcal.quarter;
      let montha = this.statcal.month;
      let weeka = this.statcal.week;
      let daya = this.statcal.day;
      let list = [];
      for (let i = 0; i < yeara.length; i++) {
        list.push(yeara[i].val);
      }

      for (let i = 0; i < quartera.length; i++) {
        list.push(quartera[i].val);
      }

      for (let i = 0; i < montha.length; i++) {
        list.push(montha[i].val);
      }

      for (let i = 0; i < weeka.length; i++) {
        list.push(weeka[i].val);
      }

      for (let i = 0; i < daya.length; i++) {
        list.push(daya[i].val);
      }

      my_barchart.setOption({
        title: {
          // text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["1", "2"],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "日(1)",
            "日(2)",
            "日(3)",
            "日(4)",
            "日(5)",
            "日(6)",
            "日(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: list,
          },
        ],
      });
    },

    //柱状图3
    thirdbarchart() {
      let thir_barchart = this.$echarts.init(
        document.getElementById("third_mysol")
      );

      let yeara = this.lightUp.year;
      let quartera = this.lightUp.quarter;
      let montha = this.lightUp.month;
      let weeka = this.lightUp.week;
      let daya = this.lightUp.day;
      let list = [];
      for (let i = 0; i < yeara.length; i++) {
        list.push(yeara[i].val);
      }

      for (let i = 0; i < quartera.length; i++) {
        list.push(quartera[i].val);
      }

      for (let i = 0; i < montha.length; i++) {
        list.push(montha[i].val);
      }

      for (let i = 0; i < weeka.length; i++) {
        list.push(weeka[i].val);
      }

      for (let i = 0; i < daya.length; i++) {
        list.push(daya[i].val);
      }

      thir_barchart.setOption({
        title: {
          // text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["1", "2"],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "日(1)",
            "日(2)",
            "日(3)",
            "日(4)",
            "日(5)",
            "日(6)",
            "日(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: list,
          },
        ],
      });
    },

    //柱状图4
    fourthbarchart() {
      let fourt_barchart = this.$echarts.init(
        document.getElementById("fourth_mysol")
      );
      // console.log("1111111111111111", this.TTdata);
      let yeara = this.TTdata.year;
      let quartera = this.TTdata.quarter;
      let montha = this.TTdata.month;
      let weeka = this.TTdata.week;
      let daya = this.TTdata.day;
      let list = [];
      for (let i = 0; i < yeara.length; i++) {
        list.push(yeara[i].val);
      }

      for (let i = 0; i < quartera.length; i++) {
        list.push(quartera[i].val);
      }

      for (let i = 0; i < montha.length; i++) {
        list.push(montha[i].val);
      }

      for (let i = 0; i < weeka.length; i++) {
        list.push(weeka[i].val);
      }

      for (let i = 0; i < daya.length; i++) {
        list.push(daya[i].val);
      }
      fourt_barchart.setOption({
        title: {
          // text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["1", "2"],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "日(1)",
            "日(2)",
            "日(3)",
            "日(4)",
            "日(5)",
            "日(6)",
            "日(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: list,
          },
        ],
      });
    },

    //柱状图5
    yeidbar() {
      let fourt_barchart = this.$echarts.init(
        document.getElementById("yield_bar")
      );
      // console.log("1111111111111111", this.TTdata);
      let yeara = this.okyield.year;
      let quartera = this.okyield.quarter;
      let montha = this.okyield.month;
      let weeka = this.okyield.week;
      let daya = this.okyield.day;
      let list = [];
      for (let i = 0; i < yeara.length; i++) {
        list.push(yeara[i].val);
      }

      for (let i = 0; i < quartera.length; i++) {
        list.push(quartera[i].val);
      }

      for (let i = 0; i < montha.length; i++) {
        list.push(montha[i].val);
      }

      for (let i = 0; i < weeka.length; i++) {
        list.push(weeka[i].val);
      }

      for (let i = 0; i < daya.length; i++) {
        list.push(daya[i].val);
      }
      fourt_barchart.setOption({
        title: {
          // text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["1", "2"],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "年",
            "季度(1)",
            "季度(2)",
            "月份(1)",
            "月份(2)",
            "月份(3)",
            "周(1)",
            "周(2)",
            "周(3)",
            "周(4)",
            "日(1)",
            "日(2)",
            "日(3)",
            "日(4)",
            "日(5)",
            "日(6)",
            "日(7)",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "",
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: list,
          },
        ],
      });
    },
  },
  mounted() {
    // this.restaurants = this.loadAll();
  },
};
</script>

<style  scoped>
.glass_content {
  width: 100%;
}
.glass_serch {
  width: 100%;
  background: #ffffff;
}

.statis_coent {
  width: 100%;
  background: #ffffff;
  margin-top: 20px;
}
.statis_hader {
  padding: 10px;
}

.table_serch {
  width: 100%;
  min-width: 900px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border:1px solid #000; */
  height: 40px;
  display: flex;
  margin-left: 10px;
  margin-top: 5px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
.el-select {
  height: 10px;
  margin-left: -6px;
}
.product {
  width: 130px;
}

.first_content {
  width: 100%;
}
.second_content {
  width: 100%;
}
.third_content {
  width: 100%;
}
.fourth_content {
  width: 100%;
}
#first_svg {
  width: 1300px;
  height: 300px;
}
#second_mysol {
  width: 1300px;
  height: 300px;
}
#third_mysol {
  width: 1300px;
  height: 300px;
}
#fourth_mysol {
  width: 1300px;
  height: 300px;
}
#yield_bar {
  width: 1300px;
  height: 300px;
}
.statis_table {
  width: 100%;
  margin-top: 30px;
  display: flex;
  align-items: center;
  overflow: auto;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}
</style>